<!---->
<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="top">
          <div class="tl"><h3>个人博客系统</h3></div>
          <div class="tr">
            <div class="user">
              <span class="username">{{user.nickname}}</span>
              <el-avatar icon="el-icon-user-solid"></el-avatar>
            </div>
            <div class="close"><span class="exit">退出</span></div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col>
              <el-menu
                :default-active="active"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item v-for="item in sideArr" :index="item.index" :key="item.id" @click="goPath(item.id)">
                  <span slot="title">{{item.title}}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';

export default {
  //import引入的组件需要注入对象中才能用
  components: {},
  data() {
    return {
      count: 0,
      active:'1',
      sideArr:[
          {
              title:'首页',
              id:'/home',
              index:'1'
          },
          {
              title:'博客管理',
              id:'/blogmanage',
              index:'2'
          },
          {
              title:'用户管理',
              id:'/usermanage',
              index:'3'
          },
          {
              title:'分类管理',
              id:'/category',
              index:'4'
          },
          {
            title:'新增数据',
            id:'/add',
            index:'5'
          },
          {
              title:'数据统计',
              id:'/count',
              index:'6'
          }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {
    user(){
      if(sessionStorage.getItem("user")){
        this.$store.commit("setUserObj",JSON.parse(sessionStorage.getItem("user")))
      }else{
        this.$store.commit("setUserObj",null)
      }
      return this.$store.state.userObj
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    load() {
      this.count += 2;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goPath(id){
        this.$router.push(id)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log('数据',this.user)
    this.active = this.$route.meta.index?this.$route.meta.index[0]:'1'
  },
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  //   background-color: #d3dce6;
  color: #333;
  text-align: center;
  //   line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  padding:0;
  overflow: hidden;
//   text-align: center;
  //   line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//   line-height: 260px;
// }

// .el-container:nth-child(7) .el-aside {
//   line-height: 320px;
// }
.el-container {
  height: 100%;
}
.el-avatar {
  vertical-align: middle;
}
.home {
  height: 100%;
}
.top {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  .tl {
  }
  .tr {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .user {
      margin-right: 20px;
      .username {
        color: #000;
        font-weight: bold;
        margin-right: 10px;
      }
    }
    .close {
      cursor: pointer;
      .exit {
        color: #d6d6d6;
      }
    }
  }
}
.tac {
  height: 100%;
}
</style>